import React from 'react'
import {connect} from 'dva/index'
import {Button, Col, Form, Icon, Input, Row} from 'antd';

import './login.css'
const R = require('ramda');
const FormItem = Form.Item;


const login = Form.create()(class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = { token: new Date().getTime() }
    }

    refreshToken = () => {
        this.setState({ token: new Date().getTime() })
    }

    handleSubmit = () => {
        this.props.form.validateFields((err, values) => {
            if (!err)
                this.props.dispatch({
                    type: "login/login",
                    payload: {
                        loginId: values.loginId,
                        password: values.password,
                        verifyCode: values.verifyCode,
                        token: this.state.token
                    }
                });
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div id="login">
                <Row>
                    <Col span={24}>
                        <div style={{ float: 'left', fontSize: '20px', color: '#c0c8cc', marginTop: 10, marginLeft: 10 }}>
                            <Icon type="global" style={{ color: 'rgb(204, 200, 8)' }} />
                            <span style={{ marginLeft: 5, color: 'rgb(204, 200, 8)' }}>洲博通物流管理平台</span>
                        </div>
                    </Col>
                </Row>


                <div className="wel" id="background-3"></div>

                {/*<div className="wel" id="box">*/}
                {/*    <div className="box-1 lefp"></div>*/}
                {/*    <div className="box-1">*/}
                {/*        <div className="righp"></div>*/}
                {/*    </div>*/}
                {/*</div>*/}

                <div className="wel" id="git"></div>




                <Form className="login-form">
                    <div style={{ marginBottom: 20, textAlign: 'center', fontSize: 16 }}>您好，请输入登录信息！</div>
                    <FormItem>
                        {getFieldDecorator('loginId', {
                            rules: [{ required: true, message: '请输入用户名!' }],
                        })(
                            <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="用户名" disabled={this.props.loading} onPressEnter={this.handleSubmit.bind(this)}/>
                            )}
                    </FormItem>

                    <FormItem>
                        {getFieldDecorator('password', {
                            rules: [{ required: true, message: '请输入密码!' }],
                        })(
                            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password"
                                placeholder="密码" disabled={this.props.loading} onPressEnter={this.handleSubmit.bind(this)}/>
                            )}
                    </FormItem>

                    <FormItem style={{ display: this.props.login.isNeedVerifyCode ? 'inline-block' : 'none' }}>
                        {getFieldDecorator('verifyCode', {
                            rules: this.props.login.isNeedVerifyCode ? [{ required: true, message: '请输入验证码!', len: 4, message: '验证码必须是4位' }] : null,
                        })(
                            <Input className={"verifyCode"} prefix={<Icon type="enter" style={{ fontSize: 13 }} />} placeholder="验证码" addonAfter={
                                <img src={apiPath.authcenter + "/api/verifyCode?" + this.state.token} onClick={this.refreshToken} />
                            } disabled={this.props.loading} onPressEnter={this.handleSubmit.bind(this)}/>
                            )}
                    </FormItem>

                    <FormItem>
                        <Button type="primary" onClick={this.handleSubmit.bind(this)} style={{ width: '100%' }} loading={this.props.loading}>{this.props.loading ? '登录中...' : '登录'}</Button>
                    </FormItem>
                </Form>
            </div>
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.login, login: state.login
    };
}

export default connect(mapStateToProps)(login);